$(document).ready(function (){

    var endPointOptions = {
        "url": "http://localhost:9200/GetUserDetails",
        type: "GET",
        dataType: 'json',
        timeout: 10000,// load and performance testing LNP
        success: function(data,status,requestObj){

            //JsonString to javascript object
            //EmpData
         // var empData =     JSON.parse('{ "data" : {"employee" : { "name" : "madhu"}}');
            // javascript object to JsonString
           // empData.data.employee.name

          //  var stringEmpData =  JSON.stringify(empData);
            var employeeList = data.UserList;

            //JSON -- Douglas Crockford

            // data --> Array of objects
            var tableDataString = '';



            for(var i= 0 ; i < employeeList.length; i++){
                tableDataString  += '<tr><td>' + (i + 1) +'</td><td>'
                    + employeeList[i].name + '</td><td>'+ employeeList[i].email
                 + '</td><td>' + employeeList[i].address + '</td><td>' +employeeList[i].phone+'</td></tr>'
            }
//tableString=tableString+
            // <tr>
            // <td>employeList[i].name</td>
            // <td></td>
            // <td></td>
            // <td></td>
            //<td></td>
            // </tr>

            $('#employeeDetails tbody').append(tableDataString);


        },
        error: function(requestObj,status,error){

            alert('error happenned');
        },
        complete: function(requestObj,status){

        }
    };
    // this is the

    $.ajax(endPointOptions);

    $('#btnNavigateUserDetails').click(function(){
       $('#displayEmpDetails').hide();
        $('#userDetails').load('form.html #formDetails',function(){
            console.log('html loaded');

            $('#btnSubmit').click(function(e){
                e.stopPropagation();
                e.preventDefault();
                var isFormValid =  validate();
                if(isFormValid){
                    postUserDetails();
                }
                return false;
                //console.log('is Valid ' + isValid);
            })

        });
    });


    function validate(){
        var userDetailForm =  $('#userDetailsForm'),isValid = false;
        userDetailForm.validate(

            {
                onsubmit: false,
                highlight: function (element, errorClass) {

                    var parentDiv = $(element).parents('div.control-group');
                    parentDiv.addClass('error');

                },
                unhighlight: function (element, errorClass) {
                    if ($(element).parent().find('.errorMessage').length == 0) {
                        var parentDiv = $(element).parents('div.control-group');
                        parentDiv.removeClass('error');
                    }

                },
                errorPlacement: function (error, element) {

                    var parentDiv = $(element).parents('div.control-group');

                    if (parentDiv.hasClass('disabled')) {
                        parentDiv.removeClass('disabled');
                    }

                    var errorParagraph = $('<p class=errorMessage />');
                    error.appendTo(errorParagraph);
                    if ($(element).parent().find('.errorMessage').length > 0) {
                        $(element).parent().find('.errorMessage').remove();
                    }

                    errorParagraph.insertAfter(element);
                },
                success: function (element) {

                    var parentDiv = $(element).parents('div.control-group');
                    var elementParentDiv = $(element).parents('p');
                    //alert(elementParentDiv.attr('class'));
                    var classList = elementParentDiv.attr('class').split(/\s+/);
                    var removeItem = false;
                    $.each(classList, function (index, item) {
                        //alert(item);
                        //alert(elementParentDiv.attr('class'));
                        if (elementParentDiv.hasClass(item)) {
                            removeItem = true;
                        }
                    });

                    //only remove the element which has error associated with the ID
                    if (removeItem) {
                        elementParentDiv.remove();
                    }

                }
            });


        ValidationRules.addRules();


        if (userDetailForm != null) {
            isValid = userDetailForm.valid();
        }
        return isValid;
    }

    function createFormData(){
       var formData = {};

        formData.name = $('#nameInput').val();
        formData.address = $('#addressInput').val();
        formData.email = $('#emailInput').val();
        formData.phone = $('#phoneInput').val();

        return formData;
    }

    function postUserDetails(){

      var formData =  createFormData();

        postAjaxOptions.data = formData;

        $.ajax(postAjaxOptions);




    }


    var postAjaxOptions = {
        "url": "http://localhost:9200/submitForm/",
        type: "POST",
        dataType: 'json',

        timeout: 10000,// load and performance testing LNP
        success: function(data,status,requestObj){

          alert(data.message);


        },
        error: function(requestObj,status,error){

            alert('error happenned');
        },
        complete: function(requestObj,status){

        }
    };
});
